<template>
	<view class="slot-content" style="background-color: #FFFFFF;">
		<scroll-view scroll-y="true" style="height: 900rpx;" :scroll-into-view="pptoView">
			<view class="brandcss">
				<view class="allbran" @tap="allBrand">全部品牌</view>
				<view class="carnum">
					{{brandTotal}}辆
				</view>
			</view>
			<view v-for="(item, index) in Brandlist" :id="item.initial" :key="item.initial">
				<view class="Brandcss">
					<view class="list-cell2" v-for="(item1, index1) in item.data" :key="index1">
						<view class="brandcss" @tap="searchBrand(item1)">
							<view class="iconimg">
								<image :src="'https://files.yzsheng.com/goodimg/brandimg/'+item1.bid+'.png!idx'" mode="aspectFit"></image>
							</view>
							<view :class="xuanzebrand === item1.bid ? 'brannameZT' : 'branname'">{{item1.brand}}</view>
							<view class="carnum">
								{{item1.carNumber}}条
							</view>
							<view class="Spin">
								<view :class="xuanzebrand === item1.bid ? 'ppjiantougo' : 'ppjiantou'">
									<u-icon name="arrow-right" color="#9A9A9A" size="12rpx"></u-icon>
								</view>
							</view>
						</view>
						<view class="xieliecss" v-if="xuanzebrand === item1.bid">
							<view class="xilie" v-for="(item2, index2) in CartypeList" :key="index2">
								<view class="cartycss" @tap="XLsearchBrand(item2)">
									<view :class="pzxuanzebrand === item2.carTypeId ? 'xilienamezt' : 'xiliename'">{{item2.carTypeName}}</view>
									<view class="Spin">
										<view :class="pzxuanzebrand === item2.carTypeId ? 'ppjiantougo' : 'ppjiantou'">
											<u-icon name="arrow-right" color="#9A9A9A" size="12rpx"></u-icon>
										</view>
									</view>
								</view>
								<view class="peizhibox">
									<view class="peizhicss" v-if="pzxuanzebrand === item2.carTypeId">
										<view class="peizhi" v-for="(item3, index3) in configureList" :key="item3.id">
											<!-- <view v-for="(item4,index) in item3.list"> -->
											<view :class="xuanzebrand ? 'peizhigo' : 'peizhixz'">
											</view>
											<view class="peizhiname" @click="Configuration(item3)">{{item3.name}}</view>
											<!-- </view> -->
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="floor">
				<view v-for="(item,index) in indexList" :data-id="item" :key="index" @tap="bindToView">
					{{item}}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xuanzebrand: '', //选择品牌
				pzxuanzebrand: '', //配置
				mask: true,
				pptoView: '',
				addtoView: '',
				Brandlist: [], //品牌列表
				CartypeList: [], //配置列表
				configureList: [], //配置list
			}
		},
		computed: {
			//品牌车子总条数
			brandTotal() {
				let sum = 0
				this.Brandlist.forEach(item => {
					item.data.forEach(c => {
						sum += c.carNumber
					})
				})
				return sum
			}
		},
		methods: {
			//选择车源配置关闭并搜索
			Configuration(type) {
				console.log(type.id, '配置')
				this.carId = type.id
				this.searchCar()
				this.$refs.uDropdown.close()
			},
			//品牌
			async getBrandDataGroup() {
				try {
					const res = await this.$api.common.GetCarBrandList()
					// console.log(res,'1')
					this.Brandlist = res.data
				} catch (e) {
					console.log(e)
				}
			},
			// 车型配置接口请求
			async GetCarModelAndConfigList(typeid) {
				try {
					let data = {
						'Bid': typeid
					}
					const res = await this.$api.common.GetCarModelAndConfigList(data)
					this.CartypeList = res.data.cartypeList
					// console.log(this.CartypeList)
				} catch (err) {
					console.log(err)
				}
			},
			//计算品牌车子条数
			compCount(list, callback) {
				let arr = JSON.parse(JSON.stringify(list))
				arr.forEach(item => {
					item.BrandList.forEach(b => {
						b.CartypeList.forEach(ct => {
							b.count = b.count ? (b.count + ct.CarList.length) : ct.CarList.length
						})
					})
				})
				callback(arr)
			},
			//选择系列
			XLsearchBrand(type) {
				// console.log(type,'系列')
				if (this.pzxuanzebrand === type.carTypeId) {
					this.pzxuanzebrand = ''
					return
				}
				this.pzxuanzebrand = type.carTypeId
				this.configureList = type.carList[0].list
			},
			// 品牌楼层定位
			bindToView(event) {
				var id = event.currentTarget.dataset.id
				this.pptoView = id
			},
			//选择品牌
			searchBrand(type) {
				// console.log(type,'品牌')
				if (this.xuanzebrand === type.bid) {
					this.xuanzebrand = ''
					return
				}
				this.xuanzebrand = type.bid
				this.GetCarModelAndConfigList(type.bid)
			},
		}
	}
</script>

<style lang="scss">
	// 品牌选择样式
	.boxsds {
		background-color: #FFFFFF;
	}

	.Brandcss {
		background: rgba(255, 255, 255, 1);
		border-radius: 10rpx;
	}

	.brandcss {
		display: flex;
		flex-direction: row;
	}

	.alladdress {
		width: 25%;
		line-height: 80rpx;
		font-weight: 500;
		text-indent: 30rpx;
		font-size: 36rpx;
	}

	.iconimg {
		margin-left: 20rpx;

		image {
			width: 66rpx;
			height: 66rpx;
		}
	}

	.branname {
		text-align: left;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		line-height: 80rpx;
		margin-left: 50rpx;
		width: 50%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.brannameZT {
		text-align: left;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FBB000;
		line-height: 80rpx;
		margin-left: 50rpx;
		width: 50%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.allbran {
		line-height: 80rpx;
		width: 56%;
		white-space: nowrap;
		margin-left: 20rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		font-size: 36rpx;
		color: #666666;
	}

	.carnum {
		margin-top: 10rpx;
		width: 30%;
		text-align: right;
		font-size: 32rpx;
		color: #666666;
	}

	.Spin {
		width: 100rpx;
		padding-left: 30rpx;
	}

	/* 下展*/
	.ppjiantougo {
		margin-top: 10rpx;
		width: 10%;
		text-align: center;
		font-size: 32rpx;
		color: #666666;
		transform: rotate(90deg);
		transition: 0.5s;
		padding-right: 20rpx;
	}

	/* 折叠 */
	.ppjiantou {
		margin-top: 10rpx;
		width: 10%;
		text-align: center;
		font-size: 32rpx;
		color: #666666;
		transform: rotate(0deg);
		transition: 0.5s;
		padding-right: 20rpx;
	}

	.cartycss {
		display: flex;
		flex-direction: row;
	}

	.slot-content {}

	.xiliename {
		text-align: left;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		line-height: 80rpx;
		margin-left: 114rpx;
		width: 520rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.list-cell {
		box-sizing: border-box;
		padding: 10rpx 0px 0px 0px;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		margin-left: 30rpx;
		line-height: 40px;
		background-color: #fff;
		border-bottom: 1px solid #EEEEEE;
	}

	.xilienamezt {
		text-align: left;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FBB000;
		line-height: 80rpx;
		margin-left: 114rpx;
		width: 520rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.peizhibox {
		.peizhicss {
			background: #F6F6F6;
			border-radius: 10rpx;
			padding: 22rpx;
			width: 642rpx;
			margin: 0 auto;

			.peizhi {
				padding: 4rpx 0rpx;
				display: flex;
				flex-wrap: wrap;

				/* 未选 */
				.peizhixz {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					margin-top: 3rpx;

					image {
						margin-left: 16rpx;
						width: 40rpx;
						height: 40rpx;
						transform: rotate(-90deg);
					}
				}

				/* 已选配置 */
				.peizhigo {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					margin-top: 3rpx;

					image {
						margin-left: 16rpx;
						width: 40rpx;
						height: 40rpx;
						transform: rotate(0deg);
					}
				}

				.peizhiname {
					line-height: 80rpx;
					text-align: left;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					margin-left: 90rpx;
					width: 520rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
		}
	}

	.floor {
		position: fixed;
		top: 20rpx;
		right: 30rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #FBB000;
	}

	.abcd {
		line-height: 70rpx;
		background-color: #FFFFFF;
		width: 665rpx;
		margin-left: 30rpx;
		border-bottom: 2rpx solid #EEEEEE;
	}
</style>
